<template>
	<view class="bgbox po_rel">
		<un-navbar titleText="举报" bgColor="#F1F4F4">
		</un-navbar>
		<view class="pa24">
			<view class="pa30 flex justify_between align_center bg_white bo_radius22">
				<view>选择举报原因</view>
				<view class="flex align_center" @click="state.topshow=true,state.index=state.index2">
					{{state.description[state.index2]||'请选择'}}
					<view class="iconfont i-right f_s24 te_black9 ma_left14"></view>
				</view>
			</view>
			<view class="pa30 ma_top20  bg_white bo_radius22">
				<view class="flex">
					<view class="fw_bold ma_right10">举报描述</view><text style="color: red;">*</text>
				</view>
				<textarea style="width: 100%;height: 350upx;" class="f_s30 flex1 ma_top10" placeholder="请输入文字"
					v-model="state.reason" maxlength="500" />
			</view>

			<view class="pa30 ma_top20  bg_white bo_radius22">
				<view class="flex">
					<view class="fw_bold ma_right10 ma_bottom20">举报证据</view><text style="color: red;">*</text>
				</view>
				<view>
					<scroll-view scroll-x="true" class="wi_100 flex topscroll nowraps" scroll-with-animation>
						<view class="di_inbl ma_right20 bo_radius20 ov_hidden po_rel" v-for="(item,index) in state.img_urls">
							<view class=" bg_black9 po_rel flex align_center justify_center">
								<image :src="item" class="imgclass" alt="" mode="‌‌aspectFill" />
							</view>
							<image class="po_abs closesss" src="../../static/image/chat/closess.png" @click="state.img_urls.splice(index,1)"/>
						</view>
						<view class="di_inbl bo_radius20 ov_hidden" style="background-color: #F3F3F3;" v-if="state.img_urls.length<4">
							<view class="flex align_center justify_center imgclass f_s40" style="color: #BABABA;" @click="senimgfun">+</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="flex align_center justify_center ma_top30">
			<view class="btn1 te_center te_white bg_cyan bo_radius80 f_s32" @click="submit" >提交</view>
		</view>
		
		
		<view class="modal bottom-modal pa_lr24" style="z-index: 1000;" :class="state.topshow?'show':''">
			<view class="dialog ma24 bg_white show_box bo_radius22 pa_tb30 ma_lr30 pa_lr30" @click.stop>
				<view class="f_s34 fw_bold te_center pa_top10 pa_bottom20">选择举报原因</view>
				<view class="pa_tb30 f_s32 line_bottom" v-for="(item,index) in state.description" @click.stop="state.index==index?state.index=null:state.index=index">
					<view class="flex justify_between align_center">
						<view>
							{{item}}
						</view>
						<view class="multipleclass" v-if="state.index!=index"></view>
						<image class="multipleclass2" v-if="state.index==index"
							src="../../static/image/chat/chatduogous.png"></image>
					</view>
				</view>
				
				<view class="flex justify_center te_cyan te_center bo_radius10" >
					<view class="cancel_btn2 te_white" @click.stop="state.topshow = false">
						取消
					</view>
					<view class="cancel_btn" @click.stop="state.index2=state.index,state.topshow = false">
						确认
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script setup lang="ts">
	import { showToast, getscrollviewheight } from '@/utils/utils'
	import { onLoad, onShow, onUnload, onReady } from '@dcloudio/uni-app'
	import { ref, reactive, getCurrentInstance, watch } from 'vue'
	import { report_report } from '@/api/chat'

	import { useStore } from 'vuex'
	import { uploadFile } from "@/utils/request";
	const store = useStore()
	const instance = getCurrentInstance(); // 获取组件实例
	onReady(async () => {

	})
	
	const senimgfun = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log('resresresresresresresres', res);
				if (res.errMsg == "chooseImage:ok") {
					
					uploadFile(res.tempFilePaths[0], {}).then((res:any) => {
									
						state.img_urls.push(res.data)
					})

					
	
				}
			}
		});
	
	
	}
	
	const submit =()=>{
		if(state.index==null){
			uni.showToast({
				title: '请选择举报原因',
				icon: 'none',
				duration: 2000
			});
			return
		}
		if(!state.reason){
			uni.showToast({
				title: '请输入举报描述',
				icon: 'none',
				duration: 2000
			});
			return
		}
		if(!state.img_urls.length){
			uni.showToast({
				title: '请上传证据',
				icon: 'none',
				duration: 2000
			});
			return
		}
		let datas = {
			unique_code:state.targetId,
			reason:state.reason,
			img_urls:state.img_urls,
			description:state.description[state.index2]
		}
		console.log(datas)
		report_report(datas
		).then(res=>{
			uni.showToast({
				title: '举报成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(()=>{
				uni.navigateBack()
			},1500)
		})
	}

	
	const navigationinfo = ref<any>(uni.getStorageSync('navigationinfo'))
	onLoad((e) => {
		console.log(e.targetId);
		if (e.targetId) {
			state.targetId = e.targetId
		}
	})

	const state = reactive({
		targetId:null,
		index:null ,
		index2:null,
		description:['不实信息','政治敏感','低情色俗','攻击辱骂','涉嫌诈骗','违法犯罪'],
		topshow:false,
		reason: '',
		img_urls:[]
	})
</script>
<style>

</style>

<style scoped lang="scss">
	$ztcolor: #39C7C1;

	.zttecolor {
		color: $ztcolor;
	}

	.ztbgcolor {
		background-color: $ztcolor;
	}

	.imgclass {
		width: 150upx;
		height: 160upx;
	}
	.closesss{
		width: 28upx;
		height: 28upx;
		top: 8upx;
		right: 8upx;
	}
	.btn2{
		position: fixed;
		bottom: 100upx;
		left: 140upx;
		width: 470upx;
		height: 88upx;
	}
	
	// 弹窗
	.show_box {
		width: 702upx;
	}
	
	.cancel_btn {
		width: 240upx;
		height: 88upx;
		line-height: 88upx;
		background: rgba(57, 199, 193, 0.15);
		margin: 20upx auto;
	}
	
	.cancel_btn2 {
		width: 240upx;
		height: 88upx;
		line-height: 88upx;
		background: #cccccc;
		margin: 20upx auto;
	}
	
	.line_bottom {
		border-bottom: 1px solid #F6F6F6;
	}
	
	.iconimgs {
		width: 40upx;
		height: 40upx;
		margin-left: 200upx;
	}
	
	.multipleclass {
		margin-top: 25upx;
		margin-right: 16upx;
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		border: 2upx solid #D0D0D0;
	}
	
	.multipleclass2 {
		margin-top: 25upx;
		margin-right: 16upx;
		width: 34upx;
		height: 34upx;
	}
	.btn1{
		width: 690upx;
		height: 88upx;
		line-height: 90upx;
	}
</style>